<template>
  <div class="repair-personnel-management">
    <el-card class="box-card" header="批量维修人员管理">
      <div class="search-bar">
        <el-input v-model="searchUsername" placeholder="搜索用户名" class="search-input" />
        <el-input v-model="searchGender" placeholder="性别" class="search-input"/>
        <el-button @click="searchPersonnel" class="search-button" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="deleteSelectedPersonnel" class="delete-button" type="danger" icon="el-icon-delete" :disabled="selectedRows.length === 0">解雇</el-button>
      </div>
      <div class="table-container">
        <el-table
            :data="personnel"
            :loading="loading"
            border
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="fullName" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
          <el-table-column prop="maintenanceType" label="维护类型"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :total="total"
            @current-change="fetchPersonnel"
            class="pagination"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const searchUsername = ref('');
const searchGender = ref('');
const personnel = ref([]);
const loading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

const selectedRows = ref([]);

const fetchPersonnel = async () => {
  loading.value = true;
  try {
    const response = await getRepairPersonnel({
      pageNum: page.value,
      pageSize: pageSize.value,
      param: { username: searchUsername.value, gender: searchGender.value }
    });
    personnel.value = response.data.data;
    total.value = response.data.total;
  } catch (error) {
    console.error('获取维修人员数据失败:', error);
    ElMessage.error('获取维修人员数据失败');
  } finally {
    loading.value = false;
  }
};

const searchPersonnel = () => {
  page.value = 1;
  fetchPersonnel();
};

const deleteSelectedPersonnel = async () => {
  const confirm = window.confirm('确定批量解雇这些维修人员吗？');
  if (confirm) {
    try {
      const idsToDelete = selectedRows.value.map(item => item.repairPersonnelId);
      await deleteRepairPersonnelByBatch(idsToDelete);
      fetchPersonnel();
      selectedRows.value = []; // 清空已选数据
      ElMessage.success('解雇成功');
    } catch (error) {
      console.error('解雇维修人员失败:', error);
      ElMessage.error('解雇维修人员失败');
    }
  }
};

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// API 调用函数
const getRepairPersonnel = (params) => {
  return axios.post('/api/repair-personnel/listRepairPersonnelPage1', params, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

const deleteRepairPersonnelByBatch = (ids) => {
  return axios.post('/api/repair-personnel/deleteBatch', { repairPersonnelIdList: ids }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

onMounted(fetchPersonnel);

// 监听分页变化
watch([page, pageSize], fetchPersonnel);
</script>

<style scoped>
.box-card /deep/ .el-card__header {
  font-size: 20px;
  font-weight: bold;
}
.repair-personnel-management {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.search-input {
  flex: 1;
}

.search-button, .delete-button {
  transition: transform 0.2s;
}

.search-button:hover, .delete-button:hover {
  transform: scale(1.05);
}

.el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table-container {
  flex: 1;
  overflow: auto;
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>
